<template>
  <div class="content">
    <div class="box">
      <!-- <p class="title">应用级灾备在各中心运行情况看板</p>
      <div class="systemCount">
        <span class="sysName">系统总数</span>
        <span class="sysNume">123</span>
      </div> -->
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">灾备看板</el-menu-item>
        <el-menu-item index="2">灾备总体建设情况</el-menu-item>
      </el-menu>
      <div class="systemCount" v-if="activeIndex == '2' ? true : false">
        <span class="sysName">系统总数</span>
        <span class="sysNume">{{ sysCount }}</span>
      </div>
    </div>
    <div class="main">
      <Disaster v-if="activeIndex == '1' ? true : false"></Disaster>
      <Application v-if="activeIndex == '2' ? true : false" @get-system="getSystem"></Application>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import Disaster from './Disaster_recovery.vue';
  import Application from './Application_level.vue';
  const activeIndex = ref('1');
  const sysCount = ref('0');
  onMounted(() => {});
  const handleSelect = (key: any) => {
    activeIndex.value = key;
  };
  const getSystem = (data: string) => {
    sysCount.value = data;
  };
</script>

<style scoped lang="less">
  .content {
    width: 100%;
    height: 100vh;
    background: rgb(235, 239, 245);
    list-style: none;
    padding: 20px;
    box-sizing: border-box;
    .box {
      height: 55px;
      margin-bottom: 18px;
      background: #fff;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      align-items: center;
      .el-menu-demo {
        height: 100%;
        border-bottom: none;
        background: none;
        width: 80%;
        .el-menu-item {
          font-size: 18px;
        }
      }
      .systemCount {
        line-height: 34px;
        .sysName {
          color: #303133;
          font-size: 16px;
          font-weight: 500;
          margin-right: 10px;
        }
        .sysNume {
          color: #409eff;
          font-size: 18px;
          font-weight: 500;
        }
      }
    }
    .main {
      height: calc(100% - 73px);
      .topNav {
        display: flex;
        justify-content: space-between;
        height: 465px;
        margin-bottom: 20px;
        box-sizing: border-box;
        .pattern {
          height: 100%;
          width: 930px;
          background: #fff;
          .mode_item {
            height: calc(100% - 65px);
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-content: flex-start;
            .el-scrollbar {
              height: 100%;
              width: 100%;
              :deep(.el-scrollbar__view) {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                align-content: flex-start;
                .item {
                  width: 208px;
                  height: 86px;
                  border: 1px solid #dfe1e6;
                  border-radius: 4px;
                  box-shadow: 0px 4px 10px 0px #2538581a;
                  padding: 12px 20px;
                  box-sizing: border-box;
                  margin-bottom: 20px;
                  .topTitle {
                    padding: 0;
                    margin: 0;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    img {
                      width: 28px;
                      height: 28px;
                    }
                  }
                }

                /* 如果最后一行是3个元素 */
                .item:last-child:nth-child(4n - 1) {
                  margin-right: calc(208px + 6.5% / 3);
                }
                /* 如果最后一行是2个元素 */
                .item:last-child:nth-child(4n - 2) {
                  margin-right: calc(416px + 13% / 3);
                }
              }
            }
          }
        }
        .ifImportant {
          height: 100%;
          width: 930px;
          background: #fff;
          .Dimensional_content {
            height: calc(100% - 65px);
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            .importSys {
              width: 208px;
              height: 88px;
              border: 1px solid #337ecc36;
              border-radius: 4px;
              box-shadow: 0px 4px 10px 0px #337ecc1a;
              padding: 12px 20px;
              box-sizing: border-box;
              .topTitle {
                padding: 0;
                margin: 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                line-height: 40px;
                img {
                  width: 28px;
                  height: 28px;
                }
              }
            }
            .No_importSys {
              width: 208px;
              height: 88px;
              margin-left: 20px;
              // border: 0.5px solid #e1f3d8;
              border: 1px solid #337ecc36;
              border-radius: 4px;
              padding: 12px 20px;
              box-shadow: 0px 4px 10px 0px #67c23a1a;
              box-sizing: border-box;
              .topTitle {
                padding: 0;
                margin: 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                line-height: 40px;
                span {
                  font-size: 30px;
                  font-weight: 500;
                }
                img {
                  width: 28px;
                  height: 28px;
                }
              }
            }
          }
        }
      }
      .Deployment_location {
        background: #fff;
        height: calc(100% - 485px);
        .deploy_position {
          height: calc(100% - 65px);
          padding: 20px;
          box-sizing: border-box;
          .el-scrollbar {
            height: 100%;
            width: 100%;
            :deep(.el-scrollbar__view) {
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;
              align-content: flex-start;
              .positionItem {
                width: 348px;
                height: 186px;
                border-radius: 4px;
                border: 1px solid #d9ecff;
                box-shadow: 0px 4px 10px 0px #409eff1a;
                margin-bottom: 20px;
                // margin-right: 15px;
                box-sizing: border-box;
                .itemName {
                  height: 50px;
                  background: #409eff;
                  padding: 0px 20px;
                  border-radius: 4px 4px 0 0;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  img {
                    width: 28px;
                    height: 28px;
                  }
                }
                .contentItem {
                  height: calc(100% - 50px);
                  padding: 0 20px;
                  box-sizing: border-box;
                  .systemCount {
                    display: flex;
                    justify-content: space-between;
                    padding-top: 14px;
                    line-height: 22px;
                    margin-bottom: 14px;
                    .sysNume {
                      color: #409eff;
                      font-size: 16px;
                      font-weight: 400;
                    }
                  }
                  .ifImportant {
                    display: flex;
                    justify-content: space-between;
                    .importSys {
                      width: 149px;
                      height: 64px;
                      border-radius: 4px;
                      background: rgba(217, 236, 255, 0.2);
                      display: flex;
                      flex-direction: column;
                      align-items: center;
                      .name {
                        font-size: 12px;
                        font-weight: 400;
                        color: #606266;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      #subheading {
        width: 100%;
        height: 64px;
        padding-left: 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        box-shadow: 0px -1px 0px 0px #dcdfe6 inset;
        .icon {
          width: 3px;
          height: 20px;
          border-radius: 0 4px 4px 0;
          display: inline-block;
          background: #409eff;
          margin-right: 10px;
        }
        .Title_text {
          font-size: 16px;
          font-weight: 500;
          color: #000;
        }
      }
      #Identical_text {
        font-size: 14px;
        font-weight: 400;
        color: #606266;
        display: inline-block;
        line-height: 22px;
      }
      #Same_digit {
        font-size: 30px;
        font-weight: 500;
        display: inline-block;
        line-height: 40px;
      }
    }
    :deep(.el-dialog__header) {
      // background: #eaeef4;
      // padding: 40px;
      height: 56px;
      padding: auto 20px;
      box-sizing: border-box;
      .el-dialog__title {
        font-size: 18px;
        font-weight: 400;
        color: #303133;
      }
      // :deep(.el-dialog__headerbtn) {
      //   width: 16px;
      //   height: 16px;
      //   top: 0;
      // }
      .el-icon {
        width: 16px;
        height: 16px;
        font-size: 16px;
      }
    }
    :deep(.el-dialog__body) {
      padding: 20px;
    }
  }
</style>
